<template>
  <el-dialog
    :model-value="visible"
    v-if="visible"
    :width="width"
    class="dialog"
    top="6vh"
    :custom-class="$style.dialog"
    :show-close="false"
    :close-on-click-modal="false"
    @opened="isOpened = true"
  >
    <template #title>
      <div :class="$style.btn_group">
        <span :class="$style.title">{{ title }}</span>
        <slot name="operate" />
        <el-button @click="onClose" type="primary">{{ $t('lang.operate.return') }}</el-button>
      </div>
    </template>
    <div
      :class="operateType === OperateTypes.VIEW ? $style.particulars : $style.particularsB"
      style="padding: 0 20px"
    >
      <!-- 详情 -->
      <detail
        :initial-values="initialValues"
        v-if="approvalNo && operateType === OperateTypes.VIEW"
        :dialogWidth="width"
      >
        <slot :isOpened="isOpened" />
      </detail>
      <!-- 发起流程 -->
      <public-process
        v-else-if="approvalNo && operateType !== OperateTypes.VIEW"
        :process-instance-id="approvalNo"
        :onSuccessful="succeedApproval"
      >
        <slot :isOpened="isOpened" />
      </public-process>
      <!-- 其他 -->
      <template v-else>
        <slot :isOpened="isOpened" />
      </template>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, PropType, Ref, ref } from 'vue'
import { ObjectType } from 'typings/interfaces'
import PublicProcess from '@/components/PublicProcess/index.vue'
import { OperateTypes } from '@/enums/operateTypes'
import Detail from './components/Detail.vue'

export default defineComponent({
  name: 'OperateModal',
  emits: ['update:visible'],
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    title: {
      type: String,
      required: true,
    },
    width: {
      type: String,
      default: '80%',
    },
    options: {
      type: Object as PropType<Ref<ObjectType>>,
      default: () => ({}),
    },
    approvalNo: {
      type: String,
      default: null,
    },
    succeedApproval: {
      type: Function,
      default: () => ({}),
    },
    operateType: {
      type: String as PropType<OperateTypes | null>,
      required: true,
    },
    initialValues: {
      type: Object as PropType<ObjectType>,
      required: true,
    },
    refresh: {
      type: Function,
      required: false,
    },
  },
  components: {
    PublicProcess,
    Detail,
  },
  setup(props, { emit }) {
    const isOpened = ref(false)
    const onClose = () => {
      emit('update:visible', false)
      isOpened.value = false
      props.refresh && props.refresh()
    }
    return {
      OperateTypes,
      onClose,
      isOpened,
    }
  },
})
</script>
<style lang="scss" module>
.btn_group {
  display: flex;
  margin: 4px 0;
  align-items: center;
  .title {
    line-height: 24px;
    font-size: 18px;
    color: #303133;
    margin-right: auto;
  }
}
.particulars {
  height: 750px;
}
.particularsB {
  height: 100%;
}
.dialog {
  overflow: hidden;
  margin-bottom: 0;
  :global(.el-dialog__body) {
    padding: 0 10px 10px 10px;
    max-height: 86vh;
    overflow: auto;
  }
}
</style>
